<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试平台</title>
    {% load staticfiles %}
    <!--引入JQuery-->
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery-3.2.1.min.js' %}"></script> 
    <link rel="stylesheet" type="text/css" href="{% static  'website/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/themes/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/demo/demo.css' %}">
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.min.js' %}"></script>
    <style type="text/css">
        /*设置左侧导航菜单样式*/
        .nav-ul {
            list-style-type: none;  padding: 0px; margin: 0px; background-color: #D1EEEE;
        }
       
        .nav-ul li {
            padding: 0px 0px; margin: 0px; 
        }


        .nav-ul li div { 
            margin: 0px; padding-left:5px;padding-top:4px; padding-bottom:4px; border-bottom: 1px solid #A9A9A9;
        }

        .nav-a { 
            text-decoration: none; padding:0; margin-left: 0px; display: block; 
        }

        .nav-a span { 
            vertical-align: middle; padding:0; margin: 0px; font-size:12px; 
        }

        .nav-ul li div:hover{
            background-color: #E0FFFF;
            color: white;
        }

        .nav-ul li div.selected {
            border:1px dashed #99BBE8; background: #F0FFF0;
            color:#416AA3; font-weight:bold;
        }

    </style>

                
    <!--初始化左侧导航-->
    <script>
        $.noConflict();

        <!--请求菜单数据-->
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url:"/pages/nav",
                dataType: "JSON",
                sync: false,
                success: function(data){
                    initLeftNav(data); //初始化左侧导航菜单                   
                },
                error: function(data){
                    alert('获取菜单请求失败,错误码code:'+ data.status);
                }
            });
 
        });


        <!--初始化左侧导航菜单函数实现-->
        function initLeftNav(navMenus){
            var navMenuSelected = ''
            $('#nav').accordion({fit:true,border:false});
            $.each(navMenus['menus'], function(index,curelement){
                var menu ='';
                if (curelement.id == 1) {
                    navMenuSelected = curelement.menu_name;
                } 

                menu += '<div title="' + curelement.menu_name + '">'; 
                if (curelement.sub_menus.length != 0){ // 有二级子菜单
                    menu += '<ul class="nav-ul">'
                    $.each(curelement.sub_menus, function(i, elem){
                        var id = 'menu' + elem.id
                        menu += '<li><div><a href="#" class="nav-a" id="' + id + '" url=' + elem.url +' onclick='
                        menu += '"clickNavMenu(\'' + elem.id + '\')"><span class="icon '+elem.icon+'" style="margin-left:\'30px\'">&nbsp;</span>'
                        menu += '<span class="nav-menu">' + elem.menu_name + '</span></a></div></li>';
                    });
                    menu += '</ul>';
     
                }
                menu += '</div>';

                //添加导航到容器
                $('#nav').accordion('add',{
                    title: curelement.menu_name,
                    content: menu,
                    border: false,
                    iconCls:'icon ' + curelement.icon
                });
            });

            // 设置默认选中的导航菜单
            $('#nav').accordion('select',navMenuSelected);

        }

        // 点击导航菜单
        function clickNavMenu(id){
            var meunID = '#menu' + id
            var menuTabName = $(meunID).children('.nav-menu').text(); //获取菜单名称
            var url = $(meunID).attr('url'); //获取菜单url
            var icon = $(meunID).find('.icon').attr('class');

            // 添加tab页面
            addTab(menuTabName, url, icon);
            
            //移除所有 a元素所在父级元素（即div）的selected类
            $('.nav-ul li div').removeClass("selected");
            //为当前点击的a元素所在父级元素增加selected类
            $(meunID).parent().addClass("selected");
        }
   
        // 点击左侧导航，打开对应tab页的函数实现
        function addTab(title, url, icon){
            if($('#tabs').tabs('exists', title)){  // 如果名为title的tab已存在，则选中tab
                $('#tabs').tabs('select', title);
            }else{ //否则，添加名为title的tab
                var iframe='<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tabs').tabs('add',{
                    title: title,
                    content: iframe,
                    closable: true,
                    icon:icon
                });
            }
            //为tab标签关联其它操作，比如双击关闭，右键操作等;
        }
    
    </script>

</head>
<body class="easyui-layout">
    <div data-options="region:'north',split:true" style="height: 30px; background: #D2E0F2 repeat-x;line-height:25px; overflow: hidden;">欢迎使用测试平台</div>
    <div data-options="region:'south'" style="height: 30px; text-align: center; line-height: 30px">Copyright © 2017-9999 By:授客</div>
    <div data-options="region:'west',split: true" title="导航栏" style="width: 200px;">
        <div id="nav">
            <!--左侧导航菜单-->
        </div>
    </div>
    <div data-options="region:'center',title:'窗口',iconCls:'icon-ok'">
        <div class="easyui-tabs"  id="tabs" data-options="fit:true, border:false, plain:true">
        </div>
    </div>
</body>
</html>